{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "mozorg/about-base.html" %}

{% block page_title %}{{ ftl('mission-were-building-a-better-internet') }}{% endblock %}
{% set body_id = "about-mission" %}

{% block page_css %}
  {{ css_bundle('mission') }}
{% endblock %}

{% block article %}
<article>
  <h1 class="mzp-c-article-title">{{ ftl('mission-were-building-a-better-internet') }}</h1>
  <p class="lede">{{ ftl('mission-our-mission-is-to-ensure-the-internet', fallback='mission-our-mission-is-to-promote-openness') }}</p>
  <p>
    {{ ftl('mission-at-mozilla-were-a-global-community-v2') }}
    {{ ftl('mission-we-believe-this-act-of-human-collaboration') }}
  </p>
  <p>{{ ftl('mission-read-the-mozilla-manifesto-to-learn-v2', url=url('mozorg.about.manifesto')) }}</p>

  <figure>
    {{ video('Mozilla_2011_Story.webm',
      'Mozilla_2011_Story.ogv',
      'Mozilla_2011_Story.mp4',
      prefix='https://videos.cdn.mozilla.net/brand/',
      poster=static('img/mission/poster-mission.jpg')) }}
    <figcaption>{{ ftl('mission-watch-the-video-above-to-learn-more') }}</figcaption>
  </figure>

  <ul>
    <li>
      <h4><a href="{{ url('mozorg.contribute') }}">{{ ftl('mission-get-involved') }}</a></h4>
      <p>{{ ftl('mission-volunteer-opportunities-in-a-number') }}</p>
    </li>
    <li>
      <h4><a href="{{ url('mozorg.about.history') }}">{{ ftl('mission-history') }}</a></h4>
      <p>{{ ftl('mission-where-we-come-from-and-how-we-got') }}</p>
    </li>
    <li>
      <h4><a href="{{ url('mozorg.about.forums.forums') }}">{{ ftl('mission-forums') }}</a></h4>
      <p>{{ ftl('mission-topics-include-support-products') }}</p>
    </li>
    <li>
      <h4><a href="{{ url('mozorg.about.governance.governance') }}">{{ ftl('mission-governance') }}</a></h4>
      <p>{{ ftl('mission-our-structure-organization-and-the-v2') }}</p>
    </li>
  </ul>

</article>
{% endblock %}

{% block email_form %}

  <div class="mzp-l-content">
    <aside class="mzp-c-newsletter t-love">
      <div class="mzp-c-newsletter-image">
        <img src="{{ static('img/newsletter/love-news.svg') }}" alt="" height="172" width="200">
      </div>

      <div class="newsletter-content">
        {% if ftl_has_messages('multi-newsletter-form-title', 'multi-newsletter-form-desc', 'multi-newsletter-form-checkboxes-legend') %}
          {{ email_newsletter_form(
            newsletters='mozilla-foundation' if switch('foundation-separate-newsletter') else 'mozilla-foundation, mozilla-and-you',
            button_class='button-dark'
          )}}
        {% elif LANG.startswith('en-') %}
          {{ email_newsletter_form(newsletters='mozilla-foundation', title='Sign up. Read up.<br> Make a difference.'|safe, desc='Get the Mozilla newsletter and help us keep the Web free and open.') }}
        {% else %}
          {{ email_newsletter_form() }}
        {% endif %}
      </div>
    </aside>
  </div>

{% endblock %}
